<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框属性</title>
		<style>
			/*css3基础语法：边框属性*/
			div{
				/*border边框属性:宽度 样式 颜色;*/
				border: 1px solid red;/*生成1px实线红色的边框*/
				/*div设置宽高*/
				height:200px;
				width: 200px;
				/* border边框属性【复合属性】 
				css定义效果   属性： 属性值 属性值 属性值；
				属性值理解为子属性，作为主属性
				语法：属性-属性值 主属性
				border-width边框宽度属性    属性值数值px
				border-style边框样式属性     属性值：solid实线
				                                   dashed虚线
												   double双线
												   dotted点线
												   border-color边框颜色属性
				*/
			   border-width: 10px;
			   border-style: dotted;
			   border-color: yellow;
			   /*
			   边框四个方向：border-方向-子属性
			   需求：左边边框宽度设置为30
			   右边框设置为黑色
			   上边框设置为双线
			   下边框设置为虚线
			   生成1px实线红色边框--css覆盖
			   */
			  border-left-width: 30px;
			  border-right-color: black;
			  border-top-style: double;
			  border-bottom-style: dashed;
			  border:1px solid red;
			  /* 画圆 边框倒角属性 border-radius: 属性值;*/
			  border-radius: 200px;/* 宽高与倒角：数值一致：圆 */
			  /* 顺时针：左上，右上，右下，左下 */
			  border-radius: 0 200px;
			  /*顺时针：左上＋右下 右上+左下*/
			  border-radius: 0 10px 100px 200px;
			  /* 顺时针：左上，右上，左下，右下 */
			  border-radius: 10px 50px 100px 150px;
			  /*顺时针：左上 右上 右下 左下*/
			  /*需求：左下角设置为300px*/
			  /*border-方向-倒角方向-radius*/
			  border-bottom-left-radius: 300px;
			  border-top-right-radius: 100px;
			}
		</style>
	</head>
	<body>
		<!-- html5 文本元素群 分区元素span，div 
		div元素：页面空间区域，有宽没高
		-->
		<div></div>
	</body>
</html>